import { BoxStyle } from "./component-related/box-style-model";
import { ShapeBox } from "./component-related/shape-box-interface";
import { CommonUtil } from "../../../util/common-util";
import { ShapeBoxBase } from "./component-related/box-base";


const paperPadding = { x: 0, y: 0 };
const lineRange = 12;
export class RootContainer extends ShapeBoxBase implements ShapeBox {
    id: string;
    style: BoxStyle;
    ctx: CanvasRenderingContext2D;
    children: ShapeBox[] = [];
    in() {
    }
    out() {
    }
    select() {
        this.boxService.allOut();
        this.boxService.selectedBox = [];
    }
    move() { }
    paint() {
        let canvasEl: HTMLCanvasElement = this.ctx.canvas;
        canvasEl.width = canvasEl.clientWidth;
        canvasEl.height = canvasEl.clientHeight;

        let ctx: CanvasRenderingContext2D = this.ctx
        let paperSize = this.getPaperSize(ctx);

        ctx.beginPath();
        ctx.fillStyle = "white";
        ctx.fillRect(paperPadding.x, paperPadding.y, paperSize.width, paperSize.height);
        ctx.closePath();
        ctx.fill();
        ctx.lineWidth = 1;
        for (let i = 0, len = paperSize.width / lineRange - 1; i < len; i++) {
            let x = (i + 1) * lineRange;
            ctx.strokeStyle = (i + 1) % 4 == 0 ? "#E8E8E8" : "#F4F4F4";
            this.drawLine(ctx, [x + paperPadding.x, paperPadding.y, x + paperPadding.x, paperSize.height + paperPadding.y]);
        }
        for (let i = 0, len = paperSize.height / lineRange - 1; i < len; i++) {
            let x = (i + 1) * lineRange;
            ctx.strokeStyle = (i + 1) % 4 == 0 ? "#E8E8E8" : "#F4F4F4";
            this.drawLine(ctx, [paperPadding.x, x + paperPadding.y, paperPadding.x + paperSize.width, x + paperPadding.y]);
        }
    }
    getPaperSize(ctx: CanvasRenderingContext2D) {
        let canvas: HTMLCanvasElement = ctx.canvas;
        canvas.width = canvas.offsetParent.clientWidth;
        canvas.height = canvas.offsetParent.clientHeight;
        return {
            width: canvas.width - paperPadding.x * 2,
            height: canvas.height - paperPadding.y * 2
        }
    }
    drawLine(ctx: CanvasRenderingContext2D, data) {
        ctx.beginPath();
        ctx.moveTo(data[0], data[1]);
        ctx.lineTo(data[2], data[3]);
        ctx.closePath();
        ctx.stroke();
    }
    constructor(data) {
        super(data);
        this.style = new BoxStyle({ left: "1%", top: "1%", width: "98%", height: "98%", cursor: "default" });
        this.canvasStyle.left = "0px";
        this.canvasStyle.top = "0px";
        this.canvasStyle.width = "100%";
        this.canvasStyle.height = "100%";
    }
}